import React, { memo, useState, useEffect } from "react";
import { observer } from "mobx-react-lite";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
  Dimensions,
} from "react-native";
import {
  ScrollView,
  GestureHandlerRootView,
} from "react-native-gesture-handler";
import { LinearGradient } from "expo-linear-gradient";
import { p } from "utils/pxToDp";
import themeStore from "stores/theme";
import YText from "components/YText";
import { Image as ExpoImage } from "expo-image";
import { SafeAreaView } from "react-native-safe-area-context";
import Ionicons from "@expo/vector-icons/Ionicons";
import { AntDesign } from "@expo/vector-icons";
import commonStyle from "utils/style";

const Log = () => {
  const theme = themeStore.theme;
  const [list, setList] = useState([1, 2, 3, 4, 5]);
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ScrollView style={{ flex: 1 }}>
        <LinearGradient
          colors={[
            theme.gradientm1,
            theme.gradientm2,
            theme.gradientm3,
            theme.gradientm4,
          ]}
          locations={[0, 0.1, 0.2, 1]}
          style={{ flex: 1 }}
        >
          <SafeAreaView style={[{ flex: 1 }, styles.page]}>
            <View style={[styles.pagetop]}>
              <YText color={theme.mainText} size={theme.f34} bold>
                日志
              </YText>
              <View style={[{ marginTop: p(5) }]}>
                <YText color={theme.secondText} size={theme.f24}>
                  记录日常的点点滴滴，成为有迹可循的回忆
                </YText>
              </View>
              <View style={{ marginTop: p(30) }}>
                <YText color={theme.mainText} size={theme.f34} bold>
                  今日小记
                </YText>
              </View>
              <View style={[styles.dayrecord]}>
                <View style={[commonStyle.flexrowaligncenter]}>
                  <YText color={theme.mainText} size={p(60)} bold>
                    20
                  </YText>
                  <View style={[{ marginLeft: p(10) }]}>
                    <YText color={theme.mainText} size={theme.f22}>
                      星期日
                    </YText>
                    <YText
                      color={theme.mainText}
                      size={theme.f22}
                      style={{ marginTop: p(5) }}
                    >
                      2021-11-20
                    </YText>
                  </View>
                </View>
                <View style={[styles.contentwrapper, commonStyle.flexrow]}>
                  <Image
                    style={styles.contentimg}
                    source={{
                      uri: "https://eat.toolbon.com/static/images/login.jpeg",
                    }}
                  />
                  <View style={{ flex: 1 }}>
                    <YText
                      ellipsizeMode={"tail"}
                      numberOfLines={5}
                      color={theme.secondText}
                      size={theme.f28}
                    >
                      内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区
                    </YText>
                  </View>
                </View>
              </View>

              <View style={{ marginTop: p(30) }}>
                <YText color={theme.mainText} size={theme.f34} bold>
                  往日记录
                </YText>
              </View>

              <View style={[styles.oldrecord]}>
                <ScrollView horizontal>
                  {list.map((item, index) => {
                    return (
                      <View style={[styles.olditem]} key={index}>
                        <View style={[commonStyle.flexrowaligncenter]}>
                          <YText color={theme.mainText} size={p(60)} bold>
                            20
                          </YText>
                          <View style={[{ marginLeft: p(10) }]}>
                            <YText color={theme.mainText} size={theme.f22}>
                              星期日
                            </YText>
                            <YText
                              color={theme.mainText}
                              size={theme.f22}
                              style={{ marginTop: p(5) }}
                            >
                              2021-11-20
                            </YText>
                          </View>
                        </View>
                        <View style={{ marginVertical: p(15) }}>
                          <Image
                            style={styles.oldimg}
                            source={{
                              uri: "https://eat.toolbon.com/static/images/login.jpeg",
                            }}
                          />
                        </View>
                        <View>
                          <YText
                            ellipsizeMode={"tail"}
                            numberOfLines={1}
                            color={theme.mainText}
                            size={theme.f30}
                            bold
                          >
                            标题哦
                          </YText>
                        </View>
                      </View>
                    );
                  })}
                </ScrollView>
              </View>
            </View>
          </SafeAreaView>
        </LinearGradient>
      </ScrollView>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  page: {
    padding: p(20),
    paddingBottom: p(150),
    paddingRight:0
  },
  olditem: {
    width: p(400),
    backgroundColor: "white",
    padding: p(20),
    borderRadius: p(20),
    marginRight:p(30)
  },
  dayrecord: {
    backgroundColor: "white",
    padding: p(30),
    borderRadius: p(20),
    marginTop: p(30),
    paddingRight:p(50)
  },
  pagetop: {
    padding: p(30),
  },
  contentwrapper: {
    marginVertical: p(20),
  },
  contentimg: {
    width: p(300),
    height: p(400),
    borderRadius: p(15),
    marginRight: p(20),
  },
  oldimg: {
    width: "100%",
    height: p(350),
    borderRadius: p(20),
  },
  oldrecord: {
    marginTop: p(30),
  },
});

export default Log;
